<template>
	<view class="main">
		<header-vue :back="true" title="订单详情"></header-vue>
		
		<view class="bg-box"></view>
		<view class="list">
			<view class="status">
				<!-- /服务中/待验收/待评价/已取消 -->
				<view class="font40 font-blod text-222222">待服务</view>
				
				<!-- 待服务 -->
				<view class="flex start font24 text-222222 mt-12rpx" >
					请按时前往服务地点
				</view>
				<!-- 竞价订单 -->
			<!-- 	<view class="teps-top">
					<u-steps current="1" dot activeColor="#DF9824" inactiveColor="#999999" size="16">
						<u-steps-item title="预约中"  ></u-steps-item>
						<u-steps-item title="面试" ></u-steps-item>
						<u-steps-item title="运签约" ></u-steps-item>
					</u-steps>
				</view>
			 -->
				<!-- 服务中 -->
				<!-- <view class="flex start font24 text-222222 mt-12rpx" >
					服务已开始，请按约定完成项目
				</view> -->
				<!-- 待验收 -->
				<!-- <view class="flex start font24 text-222222 mt-12rpx" >
					服务已完成，等待客户确认结果
				</view> -->
				<!-- 已取消 -->
				<!-- <view class="flex start font24 text-222222 mt-12rpx" >
					客户已取消订单
				</view> -->
				<!-- 待评价 -->
				<!-- <view class="flex start font24 text-222222 mt-12rpx" >
					服务已完成，等待客户评价
				</view> -->
				<!-- 竞价 -->
			<!-- 	<view class="flex start font24 text-222222 mt-12rpx" >
					竞价未通过
				</view> -->
			</view>
		
			<view  class="white-box margin32" @click="toOrderJ">
				<view class="flex between store-title font24">
					<view class="color-gold font32">等待客户补款￥300.00</view>
					<view class="time-flex">
						<view class="clock-icon"><image :src="IMAGE_URL + '/static/images/clock-icon.png'"></image></view>
						<view class="font28 price">剩余12:14:30</view>
					</view>
				</view>
				<view class="flex start padding28">
					<image :src="IMAGE_URL + '/static/login/bg.png'"></image>
					<view class="flex column between start store-info">
						<view style="display: grid;">
							<view class="font28 fontbold-500 ellipsis" style="width: 100%;">空调清洗高温除尘菌让呼吸更清新空调清洗高温除尘菌让呼吸更清新</view>
							<view class="sale-num font24">已选：日常保洁2小时</view>
						</view>
						<view class="flex start">
							<view class="flex price">
								<text class="font24">￥</text>
								<text class="font28">45</text>
								<text class="font20">/60分钟</text>
							</view>
							<view class="font20 price-type">一口价/议价/竞价</view>
						</view>
					</view>
				</view>
				<view class="flex between btn-top">
					<view class="font24 order-tips">预约时间：尽快上门</view>
					<view class="font28 time-color">2025-06-03 16:10</view>
				</view>
			</view>
			
		
			<view class="white-box">
				<view class="flex start font30 fontbold-500">
					<image :src="IMAGE_URL + '/static/mine/title-icon.png'" class="title-icon"></image>
					<view>客户信息</view>
				</view>
				<view class="flex between form-item font28">
					<view class="color-666">客户姓名</view>
					<view>刘昊然</view>
				</view>
				<view class="flex between form-item font28">
					<view class="color-666">客户电话</view>
					<view>125435646</view>
				</view>
				
				<view class="flex between form-item font28" style="border: 0;">
					<view class="color-666">客户地址</view>
					<view class="text-style">河北保定华望城悦华园二区34号楼4-204</view>
				</view>
				<view class="flex between form-item font28" style="border: 0;">
					<view class="color-666">订单备注</view>
					<view>河北保定华望城</view>
				</view>
			</view>
			<view class="white-box">
				<view class="flex start font30 fontbold-500 margin16">
					<image :src="IMAGE_URL + '/static/mine/title-icon.png'" class="title-icon"></image>
					<view>服务过程</view>
				</view>
				<view class="image-upload">
				    <view class="uploaded-images">
				        <view class="image-item" v-for="(img, index) in uploadedImages" :key="index">
				            <image :src="img" class="uploaded-img" mode="aspectFill"></image>
				            <view class="delete-btn" @click="removeImage(index)">×</view>
				        </view>
				    </view>
				    <view class="upload-btn" @click="chooseImage" >
				        <u-icon name="camera" color="#666" size="50rpx"></u-icon>
				        <text class="upload-text">上传照片</text>
				    </view>
				</view>
			</view>
			
			<view class="white-box">
				<view class="flex start font30 fontbold-500 margin16">
					<image :src="IMAGE_URL + '/static/mine/title-icon.png'" class="title-icon"></image>
					<view>完成凭证</view>
				</view>
				<view class="image-upload">
				    <view class="uploaded-images">
				        <view class="image-item" v-for="(img, index) in uploadedImages" :key="index">
				            <image :src="img" class="uploaded-img" mode="aspectFill"></image>
				            <view class="delete-btn" @click="removeImage(index)">×</view>
				        </view>
				    </view>
				    <view class="upload-btn" @click="chooseImage" >
				        <u-icon name="camera" color="#666" size="50rpx"></u-icon>
				        <text class="upload-text">上传照片</text>
				    </view>
				</view>
			</view>
			<view class="white-box">
				<view class="flex start font30 fontbold-500">
					<image :src="IMAGE_URL + '/static/mine/title-icon.png'" class="title-icon"></image>
					<view>订单信息</view>
				</view>
				<view class="flex between form-item font28">
					<view class="color-666">订单编号</view>
					<view>DD70058687923622</view>
				</view>
				<view class="flex between form-item font28" style="border: 0;">
					<view class="color-666">下单时间</view>
					<view>2025-06-01 12:23:21</view>
				</view>
				
				<view class="flex between form-item font28">
					<view class="color-666">本单收入</view>
					<view>￥28.00</view>
				</view>
				<!-- 议价 -->
			<!-- 	<view class="flex between form-item font28">
					<view class="color-666">上门费</view>
					<view>￥28.00</view>
				</view> 
				<view class="flex between form-item font28">
					<view class="color-666">维修费</view>
					<view>￥28.00</view>
				</view>	-->
				
			<!-- 竞价 -->
			<!-- 	<view class="flex between form-item font28">
					<view class="color-666">客户期望支付费用</view>
					<view>￥28.00</view>
				</view> 
				<view class="flex between form-item font28">
					<view class="color-666">期望薪资</view>
					<view>￥28.00</view>
				</view>	-->
							
				
			</view>
		</view>
		<view class="flex between fixed">
			<view class="flex start">
				<view class="item font20" style="text-align: center;">
					<i class="iconfont icon-kefu font40"></i>
					<view>联系客服</view>
				</view>
			</view>
			<!-- 待服务 -->  <!-- 议价-->
			<!-- <view class="flex font36 fontbold-500">
					<view class="flex btn-join" @click="goPage('/views/neighobr/complaint')">派单</view>
					<view class="flex btn-buy" @click="addGoods('buy')">开始服务</view>
				</view> -->
				
				<!-- 服务中 -->  <!-- 议价-->
				<!-- <view class="flex font36 fontbold-500">
						<view class="flex btn-join" @click="goPage('/views/neighobr/complaint')">补款</view>
						<view class="flex btn-buy" @click="addGoods('buy')">开始服务</view>
					</view> -->
			<!-- 服务中 -->
<!-- 			<view class="flex font36 fontbold-500">
				<view class="flex btn-buy" @click="addGoods('buy')">服务完成</view>
			</view> -->
			<!-- 已取消 -->
			<!-- <view class="flex font36 fontbold-500">
				<view class="flex btn-buy" @click="goPage('/views/neighobr/evaluate')">删除订单</view>
			</view>
			 -->
			<!-- 竞价 -->  
			<view class="flex font36 fontbold-500">
			<!-- 	<view class="flex btn-join" @click="">修改薪资</view>
				<view class="flex btn-buy" @click="">取消订单</view> -->
			<!-- 	<view class="flex btn-buy" @click="">签合同/删除订单/任务完成</view> -->
			<view class="flex btn-buy" @click="toComplete">签合同</view>
			</view>
			
		</view>
		
		<u-popup :show="showModal" mode="center" @close="showModal = false" :round="28">
			<view class="price-tip">
				<view class="font36 tip-name">请上传服务开始前照片</view>
				<i class="iconfont icon-close font32" @click="showModal=false"></i>
				<view class="image-upload">
				    <view class="uploaded-images">
				        <view class="image-item" v-for="(img, index) in uploadedImages" :key="index">
				            <image :src="img" class="uploaded-img" mode="aspectFill"></image>
				            <view class="delete-btn" @click="removeImage(index)">×</view>
				        </view>
				    </view>
				    <view class="upload-btn" @click="chooseImage" >
				        <u-icon name="camera" color="#666" size="50rpx"></u-icon>
				        <text class="upload-text">上传照片</text>
				    </view>
				</view>
				
				<view class="popup-btn" @click="showModal=false">确认</view>
			</view>
		</u-popup>

		<u-popup :show="showRepair" mode="center" @close="showModal = false" :round="28">
			<view class="price-tip padding40">
				<view class="font32 tip-name">补款</view>
				<view class="input-box" >
					<input class="input-field" type="text" placeholder="请填写本次需补金额" v-model="price"/>
				</view>
				
				<view class="btn-box">
					<view class="popup-btn cancel" @click="showRepair=false">取消</view>
					<view class="popup-btn confirm" @click="showRepair=false">确认</view>
				</view>
			</view>
		</u-popup>
		
		
	</view>
</template>

<script>
	import headerVue from '@/components/header.vue'
	import numBoxVue from '../../../views/shop/components/numBox.vue'
	import {
		searchApi
	} from '../../../api/modules/shop'
	import appConfig from '@/config/app.js'

	export default {
		data() {
			return {
				IMAGE_URL: appConfig.IMAGE_URL,
				params: {
					keyword: ''
				},
				tabIndex: 0,
				value: '',
				showModal: false,
				uploadedImages:[],
				showRepair:false,
				price:'',
				current:1,
				numList: [{
						name: '预约中'
					}, {
						name: '面试'
					}, {
						name: '签约'
					}],
			}
		},
		components: {
			headerVue,
			numBoxVue,
		},
		mounted() {},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
			chooseImage() {
			    const remaining = 9 - this.uploadedImages.length;
			    if (remaining <= 0) return;
			    
			    uni.chooseImage({
			        count: remaining,
			        sizeType: ['compressed'],
			        sourceType: ['album', 'camera'],
			        success: (res) => {
			            const files = Array.isArray(res.tempFiles) ? res.tempFiles : []
			            const filePathsFromFiles = files
			                .map(f => (f && (f.path || f.tempFilePath || f.filePath)) || '')
			                .filter(p => !!p)
			            const filePaths = Array.isArray(res.tempFilePaths) ? res.tempFilePaths : []
			            const merged = filePathsFromFiles.length ? filePathsFromFiles : filePaths
			            this.uploadedImages = this.uploadedImages.concat(merged)
			        }
			    });
			},
			removeImage(index) {
			    this.uploadedImages.splice(index, 1);
			},
			toComplete(){
				uni.navigateTo({
					url: `/views-master/home/order/complete`  
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import url("/common/public.scss");

	.main {
		background: #F6F6F6;
	}

	.list {
		padding: 0 32rpx 100rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;

		.status {
			margin: 28rpx 0;
		}
	}

	.color-gold {
		color: #DF9824 !important;
	}

	.icon-clock,.icon-star {
		font-size: 24rpx;
		color: #DF9824;
		margin-right: 4rpx;
	}

	.bg-box {
		height: 400rpx;
		background: linear-gradient(to bottom, #F3FAFF 0%, rgba(243, 250, 255, 0) 100%) !important;
		position: absolute;
		width: 100vw;
		left: 0;
		z-index: 0;
	}
	.teps-top{
		padding-top: 28rpx;
	}

	.white-box {
		background: $uni-bg-color;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 20rpx;
		padding: 28rpx 28rpx 16rpx 28rpx;
		box-sizing: border-box;
		margin-bottom: 28rpx;
		.store-title {
			padding-bottom: 28rpx;
			border-bottom: 1rpx solid #DDDDDD;
			margin-bottom: 28rpx;
			color: $uni-text-color-grey1;
		}
		.time-flex{
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
		.clock-icon{
			width: 28rpx;
			height: 28rpx;
			margin-right: 6rpx;
			image{
				width: 28rpx;
				height: 28rpx;
				vertical-align: top;
			}
		}
		.order-status {
			color: #DF9824;
		}
		.title-icon {
			width: 32rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}

		.order-tips{
			color:$uni-text-color-grey1;
		}
		.time-color{
			color:$uni-text-color;
		}
		.iconfont {
			margin-right: 4rpx;
		}
		.price-type{
			color:$uni-text-color-grey;
			padding-left: 12rpx;
		}
		.padding28{
			padding-bottom: 28rpx;
		}

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

		.price {
			color: $uni-text-color-red;
			align-items: baseline;
		}

		.item {
			padding-bottom: 28rpx;
		}

		.store-info {
			width: 100%;
			height: 200rpx;
			align-items: flex-start;

			.tag {
				padding: 0 8rpx;
				height: 28rpx;
				box-sizing: border-box;
				background: #DF9824;
				border-radius: 4rpx;
				margin-right: 8rpx;
				color: $uni-text-color-inverse;
			}

			.sale-num {
				color: $uni-text-color-grey;
				margin-top: 12rpx;
			}

			.num {
				color: $uni-text-color-grey1;
				width: 100%;
			}

			.icon-comment {
				margin-left: 26rpx;
			}
		}

		.color-666 {
			color: $uni-text-color-grey1;
		}
		
		.user {
			margin-top: 30rpx;
			
			.avatar {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			
			.sex {
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}
			
			.info {
				color: #999;
			}
			
			.line {
				height: 24rpx;
				width: 2rpx;
				background: #DDDDDD;
				margin: 0 12rpx;
			}
		}

		.form-item {
			padding: 28rpx 0 12rpx 0;
			box-sizing: border-box;
			.text-style{
				width: 420rpx;
				 white-space: normal; /* 或 pre-wrap */
				  word-wrap: break-word; 
			}
			.icon-jiantou {
				margin-left: 8rpx;
				margin-right: 0;
			}

			.flex {
				width: 400rpx;
			}

			input {
				text-align: right;

				::v-deep .input-placeholder {
					color: #AAAAAA;
				}
			}
		}
	}

	.fixed {
		position: fixed;
		width: 100%;
		z-index: 3;
		min-height: 88rpx;
		background: $uni-bg-color;
		padding: 0 32rpx;
		box-sizing: border-box;
		bottom: env(safe-area-inset-bottom);
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		bottom: 0rpx;
		.btn-buy,
		.btn-join {
			padding: 0 26rpx;
			height: 76rpx;
			border-radius: 60rpx;
			color: $uni-text-color-inverse;
			min-width: 228rpx;
			box-sizing: border-box;
		}

		.btn-buy {
			background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
		}

		.btn-join {
			margin-right: 20rpx;
			background: linear-gradient(90deg, #DF9824 0%, #F4B042 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(223, 152, 36, 0.1);
		}

		.radio {
			width: 22rpx;
			height: 22rpx;
			border-radius: 50%;
			border: 1rpx solid $uni-color-primary;
			margin-right: 8rpx;
		}

		.active {
			color: $uni-text-color;

			.radio {
				background: $uni-color-primary;
				color: $uni-text-color-inverse;
			}
		}
	}

	.modal-box {
		padding: 0 32rpx 60rpx;
		box-sizing: border-box;

		.list-box {
			background: #F6F6F6;
			border-radius: 16rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.title {
				color: $uni-text-color-grey1;
			}
		}
	}

	.modal-content {
		padding: 0 28rpx;
		box-sizing: border-box;
		position: relative;
		color: $uni-text-color-grey;

		textarea {
			width: calc(100vw - 140rpx);
			height: 220rpx;
			background: #FAFAFA;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 20rpx;
			box-sizing: border-box;
			width: 100%;
		}

		.txt-len {
			position: absolute;
			bottom: 32rpx;
			right: 40rpx;
		}
	}

	.modal-footer {
		padding: 20rpx 64rpx 40rpx 64rpx;
		box-sizing: border-box;

		.submit-btn {
			width: 100%;
			height: 84rpx;
			background: $uni-color-primary;
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(7, 133, 207, 0.16);
			border-radius: 100rpx;
			color: $uni-text-color-inverse;
		}
	}
	.time-icon{
		width: 28rpx;
		height: 28rpx;
		margin-right: 6rpx;
		
		image{
			width: 28rpx;
			height: 28rpx;
			vertical-align: top;
		}
	}
	.address-style{
		width: 10rpx;
		height: 10rpx;
		border-radius: 10rpx;
		border: 1rpx solid #DF9824;
		margin-right: 18rpx;
	}
	.divider-style{
		width: 0rpx;
		height: 28rpx;
		border: 1px solid #FFE7C0;
		margin-left: 4rpx;
	}
	.icon-clock {
		font-size: 24rpx;
		color: #DF9824;
		margin-right: 4rpx;
	}
	.prd-img{
		width: 140rpx;
		height: 160rpx;
		image{
			width: 140rpx;
			height: 160rpx;
		}
	}
	.margin16{
		margin-bottom: 16rpx;
	}
	.image-upload {
	    display: flex;
	    flex-wrap: wrap;
	    gap: 16rpx;
	}
	
	.uploaded-images {
	    display: flex;
	    flex-wrap: wrap;
	    gap: 16rpx;
	}
	
	.image-item {
	    position: relative;
	    width: 148rpx;
	    height: 160rpx;
	    border-radius: 8rpx;
	    overflow: hidden;
		border: 1px solid #999999;
	}
	
	.uploaded-img {
	    width: 100%;
	    height: 100%;
	}
	
	.delete-btn {
	    position: absolute;
	    top: 4rpx;
	    right: 4rpx;
	    width: 32rpx;
	    height: 32rpx;
	    background: rgba(0, 0, 0, 0.3);
	    color: #FFFFFF;
	    border-radius: 50%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: 24rpx;
	}
	
	.upload-btn {
	    width: 148rpx;
	    height: 160rpx;
	    background: #F8F8F8;
	    border-radius: 8rpx;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    color: #666;
		border: 1px solid #999999;
	}
	
	.upload-text {
	    font-size: 24rpx;
	    margin-top: 8rpx;
	}
	.price-tip{
		width: 640rpx;
		height: 466rpx;
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		padding:  40rpx 78rpx;
		box-sizing: border-box;
		position: relative;
	
		.tip-name{
			color:$uni-text-color;
			font-weight: bold;
			text-align: center;
			margin-bottom: 40rpx;
		}
		.icon-close{
			position: absolute;
			right:40rpx;
			top:48rpx;
		}
		.tip-content{
			background: #F6F6F6;
			border-radius: 12rpx ;
			padding: 28rpx;
			box-sizing: border-box;
			margin: 20rpx 0 40rpx;
			
		
		}
	
	
		.popup-btn{
			width: 480rpx;
			height: 76rpx;
			line-height: 76rpx;
			background: $uni-color-primary;
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(7,133,207,0.16);
			border-radius: 60rpx;
			color:$uni-text-color-inverse;
			text-align: center;
			
			margin:60rpx auto 0;
		}
	}
	.btn-box{
		display: flex;
		justify-content: space-between;
		
		box-sizing: border-box;
		.popup-btn{
			width: 228rpx;
			height: 76rpx;
			text-align: center;
			line-height: 76upx;
			border-radius: 60rpx;
			color:#ffffff;
			font-size: 36rpx;
		
		}
		.confirm{
			background: linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7,133,207,0.1);
		}
		.cancel{
			background: linear-gradient( 90deg, #DF9824 0%, #F4B042 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(223,152,36,0.1);
		}
	}
	.input-box{
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		input{
			width: 418rpx;
			height: 56rpx;
			border-radius: 8rpx;
			border: 1px solid #999999;
			text-indent: 12rpx;
			margin-left: 20rpx;
		}
	}
	.input-field {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		// background: transparent;
	}
	.padding40{
		padding-left:40rpx;
		padding-right: 40rpx;
		height: 368rpx;
	}
</style>